<template>
  <!-- <div style="margin:10px">
    <span style="font-family:Arial, Helvetica, sans-serif;font-size:24px">{{ title }}</span> <span
      style="margin-left:20px"> {{ say }}</span>
  </div> -->
  <div :class="{ hideBar: isCollapse }">
    <el-aside>
      <el-scrollbar height="640px">
        <el-menu class="el-menu-vertical-demo" :default-openeds="['1']" router :collapse="isCollapse">
          <el-sub-menu v-for="menu in menus" :key="menu.index" :index="menu.index">
            <template #title>
              <el-icon>
                <component :is="menu.icon"></component>
              </el-icon><span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="child in menu.children" :index="child.index">{{ child.name }}</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <div>
        <el-icon :size="18" v-if="isCollapse == true" @click="hideSideBar" style="margin-left:10px">
          <ArrowRight />
        </el-icon>
        <el-icon :size="18" v-if="isCollapse == false" @click="hideSideBar" style="margin-left:10px">
          <ArrowLeft />
        </el-icon>
      </div>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import { ArrowLeft, ArrowRight, Notebook, School, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
export default {
  components: {
    Notebook,
    School,
    Search,
    ArrowRight,
    ArrowLeft,
    ref
  },
  data() {
    return {
      title: "",
      isCollapse: false,
      say: "",
      menus: [
        {
          name: "医学系统",
          index: "",
          children: [
            { name: "医案检索", index: "/yian", icon: "" },
            { name: "自诊系统", index: "/zizhen", icon: "" },
          ],
          icon: "Search"
        },
        {
          name: "心理学",
          index: "",
          children: [
            { name: "婚姻", index: "/2", icon: "" },
            { name: "女性诗歌", index: "/1", icon: "" },
            { name: "育儿", index: "", icon: "" }
          ],
          icon: "Notebook"
        },
        {
          name: "儿童教育",
          index: "",
          children: [
            { name: "德育", index: "/3", icon: "" },
            { name: "语言", index: "/4", icon: "" },
            { name: "yinyue", index: "/5", icon: "" }
          ],
          icon: "School"
        }
      ]
    }
  },
  methods: {
    hideSideBar: function () {
      this.isCollapse = this.isCollapse ? false : true
    }
  }
}
</script>


<style lang="scss">
.el-aside {
  transition: width 0.28s;
  position: fixed;
  width: 210px;
}

.el-main {
  transition: margin-left .28s;
  margin-left: 210px;
  position: relative;
  height: 700px;
}

.hideBar {
  .el-aside {
    width: 0 !important;
  }

  .el-main {
    margin-left: 0px;
  }
}

.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
  margin-left: 210px;
  transition: margin .28s;
}
</style>
